<div layout="row" layout-sm="column" layout-xs="column">
    <div flex-gt-sm="33">
        <div ng-controller="KafkaConnectListCtrl" ng-include="'src/kafka-connect/list/list-connectors.html'"></div>
    </div>
    <div flex-gt-sm="66" flex>
        <md-card ng-hide="connectionFailure || rebalancing">

            <div layout="row" layout-xs="column">
                <h1 flex style="font-weight:300; padding-left:20px; margin-bottom:0px">{{welcomeMessage}} <span ng-show="clusters.length > 1">- {{cluster}}</span></h1>
                <md-button flex="20" style="margin-left:10px; margin-top:20px;"
                           ng-href="#/cluster/{{cluster}}/export-configs">
                    <i class="fa fa-download" aria-hidden="true"></i> Export config
                </md-button>
            </div>
            <hr style="margin-left:0px; margin-right:0px; background-color:#E0E0E0;border: 0;
          height: 0;border-bottom: 1px solid rgba(255, 255, 255, 0.3);" size="1">


            <md-card-content>
                <div layout="row" layout-xs="column">
                    <div flex>
                        <md-card style="background-color: #4f6672; color: #fff; ">
                            <md-card-title style="padding-bottom:5px;">
                                <md-card-title-text>
                                    <span class="md-headline tile-heading ">SINK CONNECTORS</span>
                                </md-card-title-text>
                            </md-card-title>
                            <md-card-content>
                                <div layout="row" layout-xs="column" layout-wrap>
                                    <div flex>
                                        <p class="bigTotal">{{sinks.length}}</p>
                                    </div>
                                </div>
                            </md-card-content>
                        </md-card>
                    </div>
                    <div flex>
                        <md-card style="background-color: #4f6672; color: #fff; ">
                            <md-card-title style="padding-bottom:5px;">
                                <md-card-title-text>
                                    <span class="md-headline tile-heading ">SOURCE CONNECTORS</span>
                                </md-card-title-text>
                            </md-card-title>
                            <md-card-content>
                                <div layout="row" layout-xs="column" layout-wrap>
                                    <div flex>
                                        <p class="bigTotal">{{sources.length}}</p>
                                    </div>
                                </div>
                            </md-card-content>
                        </md-card>
                    </div>
                    <div flex>
                        <md-card style="background-color: #4f6672; color: #fff; ">
                            <md-card-title style="padding-bottom:5px;">
                                <md-card-title-text>
                                    <span class="md-headline tile-heading ">TOPICS used by connectors</span>
                                </md-card-title-text>
                            </md-card-title>
                            <md-card-content>
                                <div layout="row" layout-xs="column" layout-wrap>
                                    <div flex>
                                        <p class="bigTotal">{{allTopics.unique().length}}</p>
                                    </div>
                                </div>
                            </md-card-content>
                        </md-card>
                    </div>
                    <div flex ng-hide="true">
                        <md-card style="background-color: #2196F3; color: #fff; ">
                            <md-card-title style="padding-bottom:5px;">
                                <md-card-title-text>
                                    <span class="md-headline tile-heading ">TOPICS total</span>
                                </md-card-title-text>
                            </md-card-title>
                            <md-card-content>
                                <div layout="row" layout-xs="column" layout-wrap>
                                    <div flex>
                                        <p class="bigTotal">{{allTopics.unique().length}}</p>
                                    </div>
                                </div>
                            </md-card-content>
                        </md-card>
                    </div>
                </div>
            </md-card-content>

            <hr style="margin-left:0px; margin-right:0px; background-color:#E0E0E0;border: 0;
          height: 0;border-bottom: 1px solid rgba(255, 255, 255, 0.3);" size="1">

            <md-card-content>
                <h2 flex style="font-weight:300;">Connect topology</h2>

                <div flex="100" google-chart chart="chartObject" style="width: 100%;height:{{chartHeight}}px;border:1px solid white;"></div>
            </md-card-content>
        </md-card>
    </div>
</div>


